<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https:/cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
        //回调函数嵌套的噩梦：层层嵌套。
        $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查询用户：", data);
                $.ajax({
                    url: `mock/user_corse_${data.id}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        $.ajax({
                            url: `mock/corse_score_${data.id}.json`,
                            success(data) {
                                console.log("查询到分数：", data);
                            },
                            error(error) {
                                console.log("出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });

        //1、promise异步编排语法
        const promise = new Promise(function (resolve, reject) { 
            // 执行异步操作 
            if (true){ 
                resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果 
            } else { 
                reject(error);// 调用 reject，代表 Promise 会返回失败结果 
            } 
        });
        //简写方式：
        const promise2 = new Promise((resolve, reject) => { 
            // 执行异步操作 
            if (true){ 
                resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果 
            } else { 
                reject(error);// 调用 reject，代表 Promise 会返回失败结果 
            } 
        });

        //2、处理异步结果
        promise.then(function (value){ 
            // 异步执行成功后的回调 
        }).catch(function (error){
             // 异步执行失败后的回调 
        });

        //3、Promise 改造以前嵌套方式
        new Promise((resolve, reject) =>{
            $.ajax({
                url: "mock/user.json",
                success(data) {
                    console.log("查询用户：", data);
                    resolve(data.id);
                },
                error(error) {
                    console.log("出现异常了：" + error);
                }
            });
        }).then((userId) =>{
            return new Promise((resolve, reject) =>{
                $.ajax({
                    url: `mock/user_corse_${userId}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        resolve(data.id);
                    },
                    error(error) {
                        console.log("出现异常了：" + error);
                    }
                });
            });
        }).then((corseId) =>{
            console.log(corseId);
            $.ajax({
                url: `mock/corse_score_${corseId}.json`,
                success(data) {
                    console.log("查询到分数：", data);
                },
                error(error) {
                    console.log("出现异常了：" + error);
                }
            });
        });

        //4、优化处理
        //4-1、通常在企业开发中，会把 promise 封装成通用方法，
        //如下：封装了一个通用的 get 请求方法；
        let get = function(url, data) {
            // 实际开发中会单独放到 common.js 中
            return new Promise((resolve, reject) =>{
                $.ajax({
                    url: url,
                    type: "GET",
                    data: data,
                    success(result) {
                        resolve(result);
                    },
                    error(error) {
                        reject(error);
                    }
                });
            })
        }
        //4-2、
        // 使用封装的 get 方法，实现查询分数
        get("mock/user.json").then((result) =>{
            console.log("查询用户：", result);
            return get(`mock/user_corse_${result.id}.json`);
        }).then((result) =>{
            console.log("查询到课程：", result);
            return get(`mock/corse_score_${result.id}.json`)
        }).then((result) =>{
            console.log("查询到分数：", result);
        }).
        catch(() =>{
            console.log("出现异常了：" + error);
        });
    </script>
</body>
</html>